<template>
    <div class="chart" ref="chart"></div>
</template>

<script setup>
// startTime = +new Date();
// min: startTime,
// return Math.max(0, val - startTime) + ' ms';
import * as echarts from 'echarts';
import icon from './center_icon_3.png';
import { ref, onMounted } from 'vue';
let chart = ref();
const initChart = () => {
    let chartDom = chart.value;
    let myChart = echarts.init(chartDom);

    // let icon = ``
    const data = [1700, 2800, 3700, 3600];
    let barWidth = 30;
    const offsetX = 20;
    const offsetY = 10;
    let domImg = document.createElement('img');
    let imgHeight = 60;
    let imgWidth = 60;
    domImg.style.height = imgHeight + 'px';
    domImg.style.width = imgWidth + 'px';
    domImg.height = imgHeight;
    domImg.width = imgWidth;
    domImg.src = icon;

    // 绘制左侧面
    const CubeLeft = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0,
        },
        buildPath: function (ctx, shape) {
            // 会canvas的应该都能看得懂，shape是从custom传入的
            const xAxisPoint = shape.xAxisPoint;
            // console.log(shape);
            const c0 = [shape.x, shape.y];
            const c1 = [shape.x - offsetX, shape.y - offsetY];
            const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
            const c3 = [xAxisPoint[0], xAxisPoint[1]];
            ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
        },
    });
    // 绘制右侧面
    const CubeRight = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0,
        },
        buildPath: function (ctx, shape) {
            const xAxisPoint = shape.xAxisPoint;
            const c1 = [shape.x, shape.y];
            const c2 = [xAxisPoint[0], xAxisPoint[1]];
            const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
            const c4 = [shape.x + offsetX, shape.y - offsetY];
            ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
        },
    });
    // 绘制顶面
    const CubeTop = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0,
        },
        buildPath: function (ctx, shape) {
            const c1 = [shape.x, shape.y];
            const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
            const c3 = [shape.x, shape.y - offsetX];
            const c4 = [shape.x - offsetX, shape.y - offsetY];
            ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
        },
    });
    // 注册三个面图形
    echarts.graphic.registerShape('CubeLeft', CubeLeft);
    echarts.graphic.registerShape('CubeRight', CubeRight);
    echarts.graphic.registerShape('CubeTop', CubeTop);
    let option = {
        backgroundColor: '#012366',
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                let str = params[0].name + ":";
                params.filter(function (item) {
                    if (item.componentSubType == "bar") {
                        str += "<br/>" + item.seriesName + "：" + item.value;
                    }
                });
                return str;
            },
        },
        legend: {
            show: true,
            bottom: '0',
            itemWidth: 30,
            itemHeight: 11,
            itemStyle: {
                color: 'rgb(12,160,254)'
            },
            textStyle: {
                fontSize: 22,
                color: 'rgb(233,240,255)'
            },
            data: ['进港货量'],
            right: "center", //组件离容器左侧的距离，可以是left,center,right，也可以是像素px和百分比10%
            bottom: "15px"
        },
        //图表大小位置限制
        grid: {
            x: '13%',
            x2: '14%',
            y: '20%',
            y2: '20%',
        },
        xAxis: [
            {
                // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月'],
                data: ['非洲', '欧洲', '日韩', '中东'],
                offset: 20,
                //坐标轴
                axisLine: {
                    show: false,
                    lineStyle: {
                        width: 1,
                        color: '#214776'
                    },
                    textStyle: {
                        color: '#fff',
                        fontSize: 20
                    }
                },
                type: 'category',
                axisTick: {
                    textStyle: {
                        color: '#fff',
                        fontSize: '16'
                    },
                    show: false,
                },
                axisLine: {
                    //坐标轴轴线相关设置。数学上的x轴
                    show: false,
                    lineStyle: {
                        type: 'dashed',//线的类型 虚线
                        color: '#DEDEDE',
                    },
                },
            },
            {
                data: ['非洲', '欧洲', '日韩', '中东'],
                position: 'bottom',
                offset: -40,
                // offset: 40,
                zlevel: 100,
                //坐标轴
                axisLine: {
                    show: false,
                    lineStyle: {
                        width: 1,
                        color: '#214776'
                    },
                    textStyle: {
                        color: '#fff',
                        fontSize: 20
                    }
                },
                type: 'category',
                axisLabel: {
                    formatter: function (a, index) {
                        return `{b|}`
                    },
                    rich: {
                        b: {
                            widht: imgWidth,
                            height: imgHeight,
                            backgroundColor: {
                                image: domImg
                            }
                        }
                    },
                },
                axisTick: {
                    textStyle: {
                        color: '#fff',
                        fontSize: '16'
                    },
                    show: false,
                },
                axisLine: {
                    //坐标轴轴线相关设置。数学上的x轴
                    show: false,
                    lineStyle: {
                        type: 'dashed',//线的类型 虚线
                        color: '#DEDEDE',
                    },
                },
            }
        ],
        yAxis: [
            {
                name: '%',
                nameTextStyle: {
                    color: 'rgb(233,240,255)',
                    fontSize: 22,
                    padding: 10,
                },
                min: 0,//最小
                type: 'value',
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: true,
                    inside: true,
                    length: 7
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgb(195,213,248)'
                    }
                },
                //坐标值标注
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: 'rgba(195, 213, 248, 1)',
                        fontSize: 22
                    }
                },
            }
        ],
        series: [
            {
                name: "时长",
                type: 'custom',
                renderItem: (params, api) => {
                    const location = api.coord([api.value(0), api.value(1)]);
                    return {
                        type: 'group',
                        children: [
                            {
                                type: 'CubeLeft',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: 'rgba(60, 122, 185, 1)'
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(51, 152, 188, 1)',
                                        },
                                    ]),
                                },
                            },
                            {
                                type: 'CubeRight',

                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: 'rgba(77, 172, 255, 1)',
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(68, 217, 252, 1)',
                                        },
                                    ]),
                                },
                            },
                            {
                                type: 'CubeTop',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: 'rgba(56, 227, 255, 1)',
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(56, 227, 255, 1)',
                                        },
                                    ]),
                                },
                            },
                        ],
                    };
                },
                xAxisIndex: [0, 1],
                zlevel: 100,    //层级 icon是100
                data: data
            }
        ]
    }
    domImg.onload = () => {
        myChart.setOption(option);
    }
}

onMounted(() => {
    initChart();
})
</script>

<style lang="less" scoped>
.chart {
    width: 1000px;
    height: 500px;
    margin-top: 20px;
}
</style>